<template>
  <div class="container page">


    <div class="flex">
        <ul class="flexs">
            <img :src="product.main_image" class="shop" />
        </ul>
        <ul class="flexs2">
            <!-- <p class="vvu">VVU</p> -->
            <p class="shopname" style="font-size:30rpx;margin-top:60rpx">{{product.name}}</p>
            <p class="zt" style="font-size:20rpx;">{{product.subtitle}}</p>
            <!-- <p class="zt" style="font-size:20rpx;">月销量:{{product.saled_num}}个</p>
            <p class="zt" style="font-size:20rpx;">库存:{{product.stock}}个</p> -->
            <p class="je">￥{{product.price}}</p>
        </ul>
    </div>

    <!-- <div style="margin: 120rpx 50rpx;margin-bottom:150rpx;">测试用产品详情，仅限购买测试使用，不提供实际产品销售，如有疑问请勿支付</div> -->
    <!-- <div style="margin: 120rpx 50rpx;margin-bottom:150rpx;">产品详情待补充</div> -->
    <div style="margin:50rpx;"></div>
    <img style="width:100%;" :src="product.image_2" mode="widthFix" alt="">
    <img style="width:100%;" :src="product.image_3" mode="widthFix" alt="">
    <img style="width:100%;" :src="product.image_4" mode="widthFix" alt="">
    <img style="width:100%;" :src="product.image_5" mode="widthFix" alt="">
    <img style="width:100%;" :src="product.image_6" mode="widthFix" alt="">

    <div class="display2">
      <div style="background:#fff;flex:1;text-align:center;margin: 0 30rpx;" v-if="partnerlogin" @click="qrcode(id)">生成海报</div>
      <div style="flex:1;text-align:center;margin: 0 30rpx;" v-else ></div>
      <div style="background:#fff;flex:1;text-align:center;margin: 0 30rpx;" @click="goHome">返回首页</div>
    </div>
    <div class="display">
        <ul class="flex1"><img src="https://www.hatchdo.com/wxmini/cart/cart.png" class="cart" /></ul>
        <ul class="flex1" @click="down">-</ul>
        <!-- <ul class="flex1">9</ul> -->
        <input class="flex1" style="height:80rpx;line-height:80rpx;font-size: 25rpx;" type="number" placeholder="数量" v-model="form.num">
        <ul class="flex1" @click="up">+</ul>
        <ul class="display-buttons" @click="submit(form.num,product.id)"><p class="button">加入购物车</p></ul>
        <ul class="display-buttons" @click="submit2(form.num,product.id)"><p class="buttons">立即购买</p></ul>
    </div>

  <div style="height:150rpx;"></div>
  <!-- <div class="product">
    <div>
      <img :src="product.main_image">
    </div>
    <div class="des">
      <p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{product.name}}</p>
      <p style="height: 60rpx;"></p>
      <p class="price"><span>库存:{{product.stock}}个</span><span style="text-align:right;font-size: 40rpx;color:#44CFDC;">¥{{product.price}}</span></p>
    </div>
  </div>
  <div style="margin: 0 50rpx;margin-bottom:150rpx;">{{product.subtitle}}</div>
  <div style="margin: 0 50rpx;margin-bottom:150rpx;">测试用产品详情，仅限购买测试使用，不提供实际产品销售，如有疑问请勿支付</div>

  <form>
    <div class="num">
    <button type="default" @click="down"> - </button>
    <input style="height: 100rpx;line-height:100rpx;" type="number" placeholder="请输入数量" v-model="form.num">
    <button type="default" @click="up"> + </button>   
    </div> 
  </form>

  <br>
  <button style="margin: 0 60rpx;margin-top:50rpx;" @click="submit(form.num,product.id)">加入购物车</button> -->

  </div>
</template>
<script>
// import wxParse from 'mpvue-wxparse'
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt'
 
import {showSuccess, showModal} from '@/util'
import {get, post, getAuth, postAuth} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
  },
  data () {
    return {
      partnerlogin: false,
      tabA: 0,
      form: {"num":1},
      product: {},
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
  },
  onShareAppMessage() {
    return {
      title: `为女性恢复年轻及孩子健康成长提供一站式解决方案。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
    // 合伙人是否登录
    isPartnerlogin(){
      post(`geweb/user/checkpartner`, {}, {"token":wx.getStorageSync('token'),"userId":wx.getStorageSync('user').id})
      .then(result => {
      if(result.result === 'success') {
      // console.log(this.isLogin)   

      this.partnerlogin = true
      // console.log(this.isLogin)   

      }

      if(result.code === 301) {
        this.partnerlogin = false
      }


      })
    },
    qrcode(id) {
      wx.navigateTo({
        url: `/pages/qrcode/main?id=${id}`
      }) 
    },
    goHome() {
      wx.switchTab({
        url: `/pages/hcdindex/main`
      })
    },
    async get_product(id) {
      return await get(`geweb/product/get_product?id=${id}`, {}).then(result => {
        console.log(result.res)
        this.product = result.res;
      })
    },
    productChoose () {
      // console.log(name, img, userId, accountId)
      // wx.navigateTo({
      //   url: `/pages/predictdetail/main`
      // })
    },
    up() {
      if(this.form.num < this.product.stock) {
        this.form.num++
        console.log(this.form.num)
      }
    },
    down() {
      if(this.form.num > 1) {
        this.form.num--
        console.log(this.form.num)
      }
    },
    submit(count,productid,userid) {
      console.log(wx.getStorageSync('user').id)
      // console.log(JSON.parse(wx.getStorageSync('user').id))

      // this.islogin()

      // if(!wx.getStorageSync('user').id) {
      //     wx.showToast({
      //       title: '请登录',
      //       icon: 'none'
      //     })

      //     setTimeout(() => {
      //       wx.switchTab({
      //         url: `/pages/usercenter/main`
      //       })
      //     }, 1000)
      //   return
      // }

      post(`geweb/user/checkuser`, {}, {"token":wx.getStorageSync('token'),"userId":wx.getStorageSync('user').id})
      .then(result => {
      if(result.result === 'success') {
      // console.log(this.isLogin)   


      getAuth(`geweb/cart/add?count=${count}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
      .then(result => {

        // if(result.code === 301) {
        //   wx.switchTab({
        //     url: `/pages/usercenter/main`
        //   })
        //   wx.showToast({
        //     title: '请登录',
        //     icon: 'none'
        //   })
        // }

        if(result.code === 200) {

          console.log("成功添加到购物车")
          wx.showToast({
            title: '商品成功添加到购物车',
            icon: 'none'
            // success, success_no_circle, loading，none
          })

        }
        
      })


      return
      }
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
      setTimeout(() => {
            wx.switchTab({
              url: `/pages/usercenter/main`
            })
      }, 1000)

      })

      
    },
    submit2(count,productid,userid) {
      // console.log(JSON.parse(wx.getStorageSync('user').id))

      // this.islogin()

      // if(!wx.getStorageSync('user').id) {
      //     wx.showToast({
      //       title: '请登录',
      //       icon: 'none'
      //     })
      //     setTimeout(() => {
      //       wx.switchTab({
      //         url: `/pages/usercenter/main`
      //       })
      //     }, 1000)
      //   return
      // }


      post(`geweb/user/checkuser`, {}, {"token":wx.getStorageSync('token'),"userId":wx.getStorageSync('user').id})
      .then(result => {
      if(result.result === 'success') {
      // console.log(this.isLogin)   


     getAuth(`geweb/cart/add?count=${count}&productid=${productid}&userid=${JSON.parse(wx.getStorageSync('user').id)}`, {}, {})
      .then(result => {

        // if(result.code === 301) {
        //   wx.switchTab({
        //     url: `/pages/usercenter/main`
        //   })
        //   wx.showToast({
        //     title: '请登录',
        //     icon: 'none'
        //   })
        // }

        if(result.code === 200) {

          wx.switchTab({
            url: `/pages/cart/main`
          })

        }
        
      })


      return
      }
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
      setTimeout(() => {
            wx.switchTab({
              url: `/pages/usercenter/main`
            })
      }, 1000)

      })

 
      
    },
    // 是否登录
    async islogin() {
      return await getAuth(`geweb/shop/user/lslogin`, {}, {})
      .then(result => {
        console.log(result.code)
        if(result.code === 200) {
          console.log("已登陆")
        } else {
          console.log("去登陆")
          // wx.navigateTo({
          //   url: '/pages/login/main'
          // })
        }
      })
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
      })
    }

  },
  onShow () {
    this.isPartnerlogin()

    this.id = decodeURIComponent(this.$root.$mp.query.id)
    if(this.id === "undefined"){
      this.id = decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[1]
      console.log(this.id)
      // console.log(decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[1])
    }
    
    if (decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[0].split("shareid=")[1]) {
      wx.setStorageSync('scene', decodeURIComponent(this.$root.$mp.query.scene).split("&id=")[0])
    }
    console.log('scene',wx.getStorageSync('scene').split("shareid=")[1])

    this.get_product(this.id)
    this.form.num = 1
  }
}
</script>

<style scoped lang='scss'>
// @import url("~mpvue-wxparse/src/wxParse.css");
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;  
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}

.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  // border: 1px solid #ddd;
  // border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.product {
  margin: 0 25rpx;
  margin-top: 50rpx;
  // border: 1px solid #ddd;
  // border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.num {
  display: flex;
  text-align: center;
  height: 100rpx;
  line-height:100rpx;
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.tb{
        width: 100%
    }
    .flex{
        display: flex;
        margin-top: 50rpx;
    }
    .flexs{
        flex: 1
    }
    .flexs2{
    flex: 1;
    margin-right: 30rpx;
    }
    .shop{
        width:350rpx;
        height:350rpx;
        margin-left: 20px;
       
        margin-right: 30px;
    }
    .vvu{
        font-size: 24px;
        margin-top: 10rpx;
    }
    .zt{
        font-size: 14px;
    }
    .shopname{
        margin-bottom: 15px;
    }
    .je{
        margin-top: 15px;
        background-color: #000000;
        color: #ffffff;
        width: 90px;
    }


    .display{
        display:flex;
        background-color: #ffffff;
        height: 80rpx;
        line-height: 80rpx;
        position: fixed;
        bottom:0;
        width: 100%;
    }
    .display2{
        font-size: 25rpx;
        display:flex;
        // background-color: #ffffff;
        height: 80rpx;
        line-height: 80rpx;
        position: fixed;
        bottom:120rpx;
        width: 100%;
    }
    .flex1{
        flex: 1;
        text-align: center
    }
    .flex4{
        flex: 4;
    }
    .cart{
        width: 40rpx;
        height: 40rpx;
        // line-height: 80rpx;
        margin-left: 15rpx;
        margin-top: 20rpx;
    }
    .number1{
        width: 32%;
    }
    .number2{
        width: 32%;
    }
    .display-buttons{
        flex: 2;
    }
    .button{
      text-align: center;
        border-radius: 0;
        margin: 10rpx;
        height: 60rpx;
        line-height: 60rpx;
        // font-weight:bold;
        font-size: 25rpx;
        width:150rpx;
        // height:21px;
        // background: #f9f9f9;
        background: #fff;
        color: #000;
    }
    .buttons{
      text-align: center;
        border-radius: 0;
        margin: 10rpx;
        height: 60rpx;
        line-height: 60rpx;
        // font-weight:bold;
        font-size: 25rpx;
        width:150rpx;
        // height:21px;
        background: #000;
        color: #fff;
    }
</style>
